<template>
    <div>
      <el-dialog
        :close-on-click-modal="false"
        title="分配用戶"
        :visible.sync="dialogVisible"
        width="60%"
        :before-close="handleClose"
      >
        <div>
          <vxe-table
            ref="mytable"
            :data="tableData"
            style="width: 100%; margin-top: 10px;margin-bottom: 10px"
            border
            highlight-current-row
            @checkbox-change="handleSelectionChange"
            @checkbox-all="handleAllSelectChang"
          >
            <vxe-column type="checkbox" width="40" />
            <vxe-column field="userName" title="用户名称"></vxe-column>
            <vxe-column field="userNo" title="用户账号"></vxe-column>
          </vxe-table>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="userRoleAddSubmit"
            >确 定</el-button
          >
        </span>
  
        <!-- <el-dialog
          width="60%"
          title="新增用户"
          :visible.sync="visible"
          append-to-body
          top="15vh"
          :before-close="handleCloseInner"
        >
          <vxe-table
            ref="mytable"
            :data="tableData"
            style="width: 100%; margin-top: 10px"
            border
            highlight-current-row
            @checkbox-change="handleSelectionChange"
            @checkbox-all="handleAllSelectChang"
          >
            <vxe-column type="checkbox" width="40" />
            <vxe-column field="userName" title="用户名称"></vxe-column>
            <vxe-column field="userNo" title="用户账号"></vxe-column>
          </vxe-table>
  
          <span slot="footer" class="dialog-footer">
            <el-button @click="handleCloseInner">取 消</el-button>
            <el-button type="primary" @click="userRoleAddSubmit">确 定</el-button>
          </span>
        </el-dialog> -->
      </el-dialog>
    </div>
  </template>
    <script>
  import {
    getUserRoleSearch,
    getUserRoleDelete,
    getUserRoleSaveBatch,
    getUserList,
  } from "@/api/datacentersg/achives/documentApi";
  import store from "@/store";
  export default {
    name: "userRolePopTwo",
    components: {},
    props: [],
    data: () => ({
      dialogVisible: false,
      data: [],
      currentUser: null,
      personList: [],
      multipleSelection: [],
      visible: false,
      dataForm: {
        userName: "",
        userNo: "",
      },
      row: "",
      visibleInner: false,
      tableData: [],
    }),
    computed: {},
    mounted() {},
    methods: {
      initData(row) {
        this.dialogVisible = true;
        this.row = row;
        this.getUserRoleList();
        this.getUserList();
      },
      getUserRoleList() {
        const params = {
          userId: store.getters.user_id.toString(),
          token: store.getters.token.toString(),
          data: {
            roleId: this.row.roleId,
          },
        };
        getUserRoleSearch(params).then((result) => {
          if (result.result) {
            this.data = result.resultdata.data;
          }
        });
      },
      personAdd() {
        this.visible = true;
        this.getUserList();
      },
      getUserList() {
        const params = {
          data: {
            currentPage: 1, // 当前多少页
            pageSize: 20, // 每页显示数据
          },
          userId: store.getters.user_id.toString(),
          token: store.getters.token.toString(),
        };
        getUserList(params).then((res) => {
          if (res.result) {
            this.tableData = res.resultdata.data;
          }
        });
      },
      handleSelectionChange(personRow) {
        this.personList = [];
        this.multipleSelection = [];
        this.personList = personRow.records;
        console.log(this.personList, "personList");
      },
      handleAllSelectChang({ checked, records }) {
        this.personList = [];
        this.multipleSelection = [];
        this.multipleSelection = records;
        console.log(this.multipleSelection, "multipleSelection");
      },
      handleCloseInner() {
        this.visible = false;
      },
      handleClose() {
        this.dialogVisible = false;
      },
      userRoleDelete(row) {
        this.$confirm("确定删除当前行?", "操作提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          const params = {
            userId: store.getters.user_id.toString(),
            token: store.getters.token.toString(),
            data: {
              id: row.id,
            },
          };
  
          getUserRoleDelete(params).then((result) => {
            if (result.result) {
              this.$message({
                type: "success",
                message: "操作成功",
              });
              this.getUserRoleList();
            }
          });
        });
      },
  
      userRoleAddSubmit() {
        const params = {
          userId: store.getters.user_id.toString(),
          token: store.getters.token.toString(),
          type: "user",
          data: [],
        };
        let allList = [...this.multipleSelection, ...this.personList];
        allList.forEach((item) => {
          params.data.push({
            roleId: this.row.roleId,
            userId: item.userId,
            userName: item.userName,
            userNo: item.userNo,
            roleName: null,
          });
        });
        if (allList.length == 0) {
          this.$message({
            message: "请先勾选用户",
            type: "warning",
          });
        } else {
          getUserRoleSaveBatch(params).then((result) => {
            if (result.result) {
              this.$message({
                message: "操作成功",
                type: "success",
              });
              this.getUserRoleList();
              this.visible = false;
            }
          });
        }
      },
    },
  };
  </script>
    